<!--
 * @Description: 富文本编辑器
 * @Author: wang_k
 * @Date: 2023-07-10 16:36:32
 * @LastEditTime: 2025-07-14 18:45:28
 * @FilePath: /note/src/views/QuillEditor/index.vue
-->
<template>
  <div>
    <quill-editor
      class="ql-editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!-- <Editor ref="Editor" @change="contentChange" /> -->
  </div>
</template>

<script>
// import Editor from './Editor.vue';
export default {
  name: '',
  components: {
    // Editor,
  },
  props: {},
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [
              {
                font: [
                  false,
                  'SimSun',
                  'SimHei',
                  'Microsoft-YaHei',
                  'KaiTi',
                  'FangSong',
                  'Arial',
                ],
              },
            ], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'], // 链接、图片、视频
          ],
          placeholder: '请输入正文',
        },
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init() {
      this.$nextTick(() => {
        // 渲染数据
        this.$refs.Editor.setContent(res.data[0].theText);
        this.$refs.Editor.setReadOnly(true);
      });
    },
    contentChange(val) {
      this.editorText = val;
    },
  },
};
</script>

<style scoped lang="scss"></style>
